<template>
  <basic-container>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-setting"></i> 员工管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 修改
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <avue-form
      ref="form"
      v-model="form"
      :option="option"
      @reset-change="emptyChange"
      @submit="submit"
    >
      <template slot-scope="scope" slot="avatar">
        <div>
          <div v-for="(item,index) in photoList" class="thumbUrl">
            <img :src="item.picUrl" />
            <!-- 删除 -->
            <div class="hover_show">
              <i class="el-icon-delete" @click="handlePictureRemove(index)"></i>
            </div>
          </div>
          <div class="select_img" @click="sleImg=true" style="float: left;">
            <i class="el-icon-plus"></i>
          </div>
          <el-dialog title="选择图片" :visible.sync="sleImg" style="text-align: left;">
            <sel-img-photo-gallery ref="selImg" type="12" @select="onSelectImgs"></sel-img-photo-gallery>
          </el-dialog>
        </div>
      </template>
      <template slot-scope="scope" slot="deptId">
        <avue-input-tree
          v-model="form.deptId"
          :dic="treeDeptData"
          :props="defaultProps"
          type="tree"
          placeholder="请选择所属部门"
        />
      </template>
      <template slot="roleIds" slot-scope="scope">
        <avue-select
          v-model="role"
          :dic="rolesOptions"
          :props="roleProps"
          multiple
          placeholder="请选择角色"
        />
      </template>
      <template slot="areaSns" slot-scope="scope">
        <avue-input-tree
          v-model="areaSnList"
          :dic="areaTreeData"
          :props="areaProps"
          type="tree"
          multiple
          placeholder="请选择区域"
        />
      </template>
      <template slot-scope="scope" slot="menuForm">
        <el-button @click="goBack">返回</el-button>
      </template>
    </avue-form>
  </basic-container>
</template>

<script>
import { getObj, putObj } from "@/api/crm/marketemployee";
import { deptRoleList } from "@/api/admin/role";
import { fetchTree } from "@/api/admin/dept";
import { formOption } from "@/const/crud/crm/form_option/employee";
import { areaTree } from "@/api/crm/area";
import selImgPhotoGallery from "../../components/pds/common/sel_img_photogallery";

export default {
  data() {
    return {
      form: {},
      role: [],
      areaSnList: [],
      option: formOption,
      treeDeptData: [],
      rolesOptions: [],
      areaTreeData: [],
      roleProps: {
        label: "roleName",
        value: "roleId"
      },
      defaultProps: {
        label: "name",
        value: "id",
        children: "children"
      },
      areaProps: {
        label: "areaName",
        value: "areaSn"
      },
      photoList: [],
      sleImg: false
    };
  },
  components: {
    selImgPhotoGallery
  },

  mounted() {},
//   created() {
//     // let id = this.$route.query.res.id;
    
//   },



  beforeRouteEnter(to, from, next) {
    console.log(to, from);
    next(vm => {
      vm.photoList = []
      vm.getEditUpdate(vm.$route.query.res.id)
    });
  },
  methods: {
      getEditUpdate(id) {
          getObj(id).then(response => {
      this.form = response.data.data;
      this.role = this.form.roleList;
      this.areaSnList = this.form.areaSnList;
      this.form.deptId = this.form.deptId ? Number(this.form.deptId) : null;
      this.handleDept();
      this.getNodeData();
      this.fetchAreaTree();
      this.photoList.push({ id: 1, picUrl: this.form.avatar });
    });
      },


    onSelectImgs(imgs) {
      // 只要1张
      this.photoList.splice(0, 1);
      this.photoList.push({ id: imgs[0].id, picUrl: imgs[0].picUrl });
      this.sleImg = false;
    },
    // 删除el-upload的图片
    handlePictureRemove(index) {
      this.photoList.splice(index, 1);
    },
    fetchAreaTree() {
      areaTree().then(response => {
        this.areaTreeData = response.data.data;
      });
    },


    getNodeData() {
      deptRoleList().then(response => {
        this.rolesOptions = response.data.data.filter(
          item => item.roleCode.toUpperCase() !== "ROLE_ADMIN"
        );
      });
    },
    handleDept() {
      fetchTree().then(response => {
        this.treeDeptData = response.data.data;
      });
    },
    emptyChange() {
      this.form = {};
    },
    submit() {
      let avatar = this.photoList[0] ? this.photoList[0].picUrl : null;
      let params = {
        areaSns: this.areaSnList.join(","),
        roleIds: this.role.join(","),
        id: this.form.employeeId,
        deptId: this.form.deptId ? String(this.form.deptId) : "",
        avatar: avatar
      };
      putObj(Object.assign({}, this.form, params)).then(response => {
        if (response.data.code === 0) {
          this.$message.success("修改成功");
          this.goBack();
        } else {
          this.$message.success(response.data.msg);
        }
      });
    },
    goBack(time = 1000) {
      let that = this;
      setTimeout(function() {
        that.$store.commit("DEL_ONE_TAG", that.$route);
        that.$router.go(-1);
      }, time);
    }
  }
};
</script>

<style scoped lang="scss">
.crumbs {
  margin: 20px 10px;
}

.thumbUrl {
  width: 150px;
  height: 150px;
  position: relative;
  line-height: 146px;
  float: left;
  margin-right: 15px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #c0ccda;
  text-align: center;
}

.thumbUrl img {
  width: 100%;
  height: 100%;
}

.thumbUrl .hover_show {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: none;
}

.thumbUrl:hover .hover_show {
  display: block;
}

.thumbUrl .hover_show i {
  color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.select_img {
  width: 148px;
  height: 148px;
  line-height: 146px;
  border: 1px dashed #c0ccda;
  background-color: #fbfdff;
  font-size: 28px;
  color: #8c939d;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
}
</style>


